<template>
  <!-- 修改用户表单 -->
  <el-dialog
    :visible.sync="dialogVisible"
    width="40%"
    @close="close"
    title="修改用户">

    <el-form
      :model="user"
      ref="userForm"
      :rules="userFormRules"
      status-icon
      label-width="100px">
      <el-form-item label="用户手机：">
        <el-input
          v-model="user.mobile"
          :disabled="true"
          style="width: 300px;"/>
      </el-form-item>

      <el-form-item label="用户昵称：" prop="nickname">
        <el-input
          maxlength="20"
          show-word-limit
          v-model="user.nickname"
          style="width: 300px;"/>
      </el-form-item>

      <el-form-item label="用户邮箱：" prop="email">
        <el-input
          maxlength="50"
          show-word-limit
          v-model="user.email"
          style="width: 300px;"/>
      </el-form-item>

      <el-form-item label="用户性别：">
        <el-radio-group v-model="user.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
          <el-radio :label="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="saveOrUpdate">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import { getUserById, updateUserById } from '@/api/user'
  import { validNormal,validEmail} from '@/utils/validate'

  export default {
    data() {

      //检验昵称
      const validateNickname = (rule, value, callback) => {
        if (value.length < 3 || value.length > 20 || !validNormal(value)){
          callback(new  Error("请输入正确昵称，长度在3-20位之间的任意字符"))
        }
        else callback()
      }

      //检验邮箱
      const validateEmail = (rule, value, callback) => {
        if (!validEmail(value)){
          callback(new Error("请输入正确邮箱"));
        }
        else callback()
      }

      return {
        dialogVisible: false,
        user: {  // 用户对象
          userId: '',
          mobile: '',
          nickname: '',
          email: '',
          sex: ''
        },
        //检验规则
        userFormRules:{
          nickname:[{validator: validateNickname,trigger: 'blur'}],
          email:[{validator: validateEmail,trigger: 'blur'}]
        }
      }
    },

    methods: {
      open(userId) {
        this.dialogVisible = true
        if (userId) {
          this.user.id = userId
          getUserById(userId).then(result => {
            this.user = result.data.item
            delete this.user.gmtCreate
            delete this.user.gmtModified
          })
        }
      },

      close() {
        this.$refs.userForm.resetFields();
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },

      saveOrUpdate() {
        this.update()
      },

      resetForm() {
        this.user.userId = ''
        this.user.mobile = ''
        this.user.nickname = ''
        this.user.email = ''
        this.user.sex = ''
      },

      update() {
        this.$refs.userForm.validate((valid) => {
          if (valid) {
            //检验通过
            updateUserById(this.user.id, this.$qs.stringify(this.user)).then(result => {
              this.$message({
                type: 'success',
                message: '修改成功！'
              })
              // 关闭组件
              this.close()
              // 调用父组件监听函数
              this.$emit('onSaveSuccess')
            })
          }
          else {
            return false;
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
